<template>
  <view class="page">
    <u-navbar autoBack fixed placeholder bgColor="#ffffff">
      <template #left>
        <view class="navBar">
          <u-icon name="arrow-left" color="#000" size="18"></u-icon>
          <text class="nav_title">投诉建议</text>
        </view>
      </template>
    </u-navbar>
    <view class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }" >
      <view class="complaints" v-for="(item, index) in complainList" :key="index">
        <view class="header">
          <text>{{getComplainTypeText(item)}}</text>
          <!--已处理-->
          <view v-if="item.handleStatus === '2'" class="tag">{{getStatusText(item)}}</view>
          <view v-else>{{getStatusText(item)}}</view>
        </view>
        <view class="item">
          <text>事发地点：</text>
          <text>{{item.address}}</text>
        </view>
        <view class="item">
          <text>投诉对象：</text>
          <text>{{item.complainFor}}</text>
        </view>
        <view class="item">
          <text>投诉时间：</text>
          <text>{{item.createTime}}</text>
        </view>
      </view>
    </view>
    <view class="add-btn" @click="addComplain">+</view>
  </view>
</template>

<script>

import {complainList} from "@/api/complaints";
import {getSystemDictTypeData} from "@/api/system";

export default {
  async onShow() {
    await this.getStatus()
    await this.getComplainType()
    await this.getComplainList()
  },
  data() {
    return {
      complainList: [],
      complainTypeList: [],
      statusList: []
    };
  },
  computed: {
    navBarHeight() {
      const platform = uni.getSystemInfoSync().platform
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
      let navHeight = 0
      if (['ios', 'devtools'].includes(platform)) {
        navHeight = 44
      } else {
        navHeight = 48
      }
      return navHeight + statusBarHeight
    },
  },
  methods: {
    getComplainTypeText(complain) {
      const item = this.complainTypeList.find(item => item.dictValue === complain.type)
      return item.dictLabel
    },
    getStatusText(complain) {
      const item = this.statusList.find(item => item.dictValue === complain.handleStatus)
      return item.dictLabel
    },
    async getComplainType () {
      const { code, data, msg } = await getSystemDictTypeData('complain_type')
      if (code === 200) {
        this.complainTypeList = data
      } else {
        this.$modal.msgError(msg)
      }
    },
    async getStatus () {
      const { code, data, msg } = await getSystemDictTypeData('complain_handle_status')
      if (code === 200) {
        this.statusList = data
      } else {
        this.$modal.msgError(msg)
      }
    },
    async getComplainList() {
      const { code, data, msg } = await complainList()
      if (code !== 200) {
        this.$modal.msgError(msg)
        return
      }
      this.complainList = data.rows
    },
    addComplain() {
      uni.navigateTo({
        url: '/pages/complaints/pages/add'
      })
    }
  }
}
</script>

<style lang="scss">
.page {
  width: 100vw;
  height: 100vh;
  padding: 12px;
  .navBar {
    display: flex;
    align-items: center;
    .nav_title {
      font-size: 36rpx;
      font-weight: 400;
      color: #000000;
      margin-left: 8rpx;
    }
  }
  .content {
    background-color: #F3F3F3;
    .complaints {
      background: #FFFFFF;
      border-radius: 6px;
      padding: 13px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      margin-bottom: 12px;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text {
          font-family: HarmonyOS_Sans_SC_Medium;
          font-size: 16px;
          color: #333333;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        view {
          background: #ECF3FE;
          border-radius: 2px;
          padding: 4px 5px;
          font-family: HarmonyOS_Sans_SC;
          font-size: 12px;
          color: #2C7EFF;
          line-height: 12px;
          text-align: left;
          font-style: normal;
        }
        .tag {
          background: #D6E9E7;
          color: #01756B;
        }
      }
      .item {
        margin-top: 16px;
        text:nth-child(1) {
          font-family: HarmonyOS_Sans_SC;
          font-size: 14px;
          color: #666666;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
        text:nth-child(2) {
          font-family: HarmonyOS_Sans_SC;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
  .add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 20px;
    bottom: 150px;
    width: 56px;
    height: 56px;
    background: radial-gradient( 50% 50% at 50% 50%, #148C81 0%, #01756B 100%);
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.3);
    color: #FFFFFF;
    border-radius: 50%;
    font-size: 40px;
  }
}
</style>
